<template>
	<div class="my">
		<div class="bg"></div>
		<div class="main">
			<image class="avatar" src="/static/image/defaultUser.png" mode="widthFix"></image>
			<div class="name">科圃用户</div>
			<div class="info">
				<div class="item">
					<div class="label">用户名</div>
					<div class="val">汪利军</div>
				</div>
				<div class="item">
					<div class="label">身份证号</div>
					<div class="val">123123123123123213</div>
				</div>
				<div class="item">
					<div class="label">电话</div>
					<div class="val">19355347228</div>
				</div>
				<div class="item">
					<div class="label">所属项目</div>
					<div class="val">项目一</div>
				</div>
				<div class="item">
					<div class="label">地块</div>
					<div class="val">地块一</div>
				</div>
				<div class="item">
					<div class="label">地块面积</div>
					<div class="val">10亩</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<button class="confirm out" @click="loginOut">退出登录</button>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const loginOut = () => {
		console.log('退出登录');
	}
</script>

<style scoped lang="scss">
	.my {
		display: flex;
		align-items: center;
		flex-direction: column;
		height: 100vh;

		.bg {
			width: 100%;
			height: 24vh;
			background-color: $uni-bg-color-default;
		}

		.main {
			width: 710rpx;
			height: 60vh;
			padding: $uni-space-default-20;
			background-color: $uni-bg-color;
			margin-top: -14vh;
			border-radius: 20px;
			box-sizing: border-box;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;
				display: block;
				margin-top: -120rpx;
				background-color: $uni-bg-color;
				border-radius: $uni-border-radius-circle;
				box-sizing: border-box;
				font-size: $uni-font-size-30-rpx;
			}

			.name {
				text-align: center;
				margin-top: $uni-spacing-row-sm;
				color: $uni-text-color;
			}

			.info {
				padding: $uni-space-default-20 $uni-space-default-40;
				margin-top: $uni-space-default-40;

				.item {
					border-top: 1px solid $uni-border-color;
					font-size: $uni-font-size-26-rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					line-height: 6vh;
					.label {}
				}
			}
		}

		.footer {
			position: absolute;
			bottom: 10vh;
		}
	}
</style>